<!--个人中心侧边栏-->
<template>
  <div class="UserSidebar" v-if="!isMobile">
    <div class="sidebar-frame">
      <div
        class="sidebar-panel"
        v-for="(item1, index) in sidebarList"
        :key="'item1' + index"
      >
        <p class="panel-title">{{ item1.title }}</p>
        <div
          class="sidebar-fast"
          v-for="(item2, index) in item1.list"
          :key="'item2' + index"
          @click="clickUrl(item2.url)"
        >
          <span :to="item2.url" class="fast-title" :style="item2.url==basicUrl?'border-bottom: 2px solid #000;':''">{{ item2.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserSidebar",
  data() {
    return {
      sidebarList: [
        {
          title: "Account Home",
          list: [
            {
              title: "Home",
              url: "/user",
            },
            {
              title: "My members",
              url: "/user/account",
            },
          ],
        },
        {
          title: "My orders",
          list: [
            {
              title: "All Order",
              url: "/user/order?navIndex=0",
            },
            {
              title: "Payment For",
              url: "/user/order?navIndex=1",
            },
            {
              title: "To be delivered",
              url: "/user/order?navIndex=2",
            },
            {
              title: "Shipping For",
              url: "/user/order?navIndex=3",
            },
            {
              title: "Completed",
              url: "/user/order?navIndex=4",
            },
            {
              title: "Refunded",
              url: "/user/order?navIndex=5",
            },
          ],
        },
        {
          title: "My Favorite",
          list: [
            {
              title: "Favorite Product",
              url: "/user/collection",
            },
          ],
        },
        {
          title: "My account",
          list: [
            {
              title: "My Settings",
              url: "/user/setting",
            },
            {
              title: "My Address",
              url: "/user/address",
            },
            {
              title: "Change Password",
              url: "/user/changepassword",
            },
          ],
        },
        {
          title: "Customer Service",
          list: [
            {
              title: "After Sales Support",
              url: "/user/service",
            },
          ],
        },
      ],
    };
  },
  computed: {
    basicUrl() {
      return this.$store.state.over.basicUrl;
    },
  },
  mounted() {},
  methods: {
    clickUrl(url) {
      this.$router.push(url);
      this.$store.commit("order/setOrderListRefre", true);
    },
  },
};
</script>
<style lang="less" scoped>
.UserSidebar {
  min-width: 6.7rem;
  clear: both;
  overflow: hidden;
  padding-right: 1rem;
  .sidebar-frame {
    width: 100%;
    clear: both;
    padding-right: 0.5rem;
    .sidebar-panel {
      width: 100%;
      clear: both;
      padding-bottom: 2rem;
      .panel-title {
        font-size: 0.8rem;
        line-height: 0.8rem;
        font-family: "BTBlack";
        text-transform: Uppercase;
      }
      .sidebar-fast {
        width: 100%;
        clear: both;
        margin-top: 0.5rem;
        display: flex;
        .fast-title {
          height: 0.7rem;
          font-size: 0.6rem;
          line-height: 0.6rem;
          font-family: "BTBlack";
          text-transform: Capitalize;
          color: #000;
          cursor: pointer;
          margin-top: 0.3rem;
        }
        .fast-title:hover {
          border-bottom: 2px solid #000;
        }
      }
    }
  }
}
</style>